<template>
  <!-- <BaseMainSlot>
    <template v-slot:searchbox>
      <el-collapse v-model="activeName" accordion @change="handleChange">
        <el-collapse-item name="1">
          <template slot="title">
            <div class="select-btns search-btns" @click.stop="changeSelect()">
              <i class="el-icon-circle-check"></i>
              <p v-if="activeName === '1'">收起筛选</p>
              <p v-if="activeName === ''">展开筛选</p>
            </div>
          </template>
<div class="search-btn search-btns" @click.stop="queryPageList()">
  <i class="el-icon-circle-check"></i>
  <p>查询</p>
</div>
<div class="select-box-content">
  <div class="select-box-content-name">选择批次：</div>
  <el-select filterable clearable v-model="searchParams.productionBatchId" placeholder="选择批次">
    <el-option v-for="item of batchList" :key="item.productionBatchId" :label="`${item.mnecode}_${item.varietyName}`"
      :value="item.productionBatchId" />
  </el-select>
</div>
</el-collapse-item>
</el-collapse>
</template>
<template v-slot:content>

    </template>
</BaseMainSlot> -->
  <MainSlot>
    <template v-slot:searchForm>
      <SearchForm v-if="formItemList.length" :formItemList="formItemList" :unfoldFlag="unfoldFlag" @search="search"
        @isUnfold="(v) => { unfoldFlag = v }">
      </SearchForm>
    </template>
    <template v-slot:table>
      <ChooseHomeBase :categoryList="categoryList" @searchBar="searchBar"></ChooseHomeBase>
      <Table :propList="propList" :listData="tableData" :showFooter="false">
        <template v-slot:ratio="{ row }">
          <div v-if="row.deadReportId">{{ row.ratio + '%' }}</div>
        </template>
        <template v-slot:footer>
        </template>
      </Table>
    </template>
    <template v-slot:pagination>
      <Pagination @current-change="changeCurrentPage" :page="currentPage" :size="pageSize" :total="totalSize">
      </Pagination>
    </template>
  </MainSlot>
</template>

<script>
import MainSlot from "@/components-production-management/MainSlot";
import Pagination from '@/components-production-management/Pagination';
import SearchForm from '@/components-production-management/SearchForm';

import Table from "@/components/table/index.vue";
import ChooseHomeBase from "@/components/ChooseHomeBase/index.vue"
import { mymixin } from "@/utils/mixin";
import { mapGetters } from "vuex";

import BatchApi from "@/api/batch-mange";
import AbnormalDeathApi from "@/api/health-management/abnormal-death-management";
export default {
  name: "RiskOvervie",
  components: { Pagination, Table, MainSlot, SearchForm, ChooseHomeBase },
  mixins: [mymixin],
  data() {
    return {
      unfoldFlag: false,
      categoryList: [],
      searchParams: {
        productionBatchId: ''
      },
      batchList: [],
      checkedIdList: [],
      listData: [],
      formItemList: [
        {
          label: '选择批次',
          type: 'select',
          selectOptions: [],
          param: 'productionBatchId',
          defaultSelect: '', // 下拉框默认选中项
          multiple: false,
          isShow: true
        }
      ],
      propList: [
        { prop: 'batchName', label: "批次编号" },
        { prop: 'inputNum', label: "养殖数量(尾)" },
        { prop: 'deadNum', label: "直鱼数量(尾)" },
        { slotName: "ratio", label: "直鱼率(%)" },
        { prop: 'date', label: "监测日期" },
      ],
    };
  },
  computed: {
    ...mapGetters({
      judgePermission: "permission/judgePermission"
    })
  },
  watch: {},
  created() {
    this.categoryList = JSON.parse(sessionStorage.getItem('homeBaseList'))
  },
  mounted() {
    this.queryPageList();
    this.queryBatch();
  },
  methods: {
    search(data) {
      this.searchParams = { ...data };
      this.queryPageList();
    },
    setFormOptions() {
      this.searchParams.productionBatchId = null;
      let list = JSON.parse(JSON.stringify(this.formItemList));
      this.formItemList = []
      list.forEach((item, index) => {
        if (item.param.indexOf('productionBatchId') !== -1) {
          let selectOptions = this.batchList.map(data => {
            return {
              text: data.mnecode, value: data.productionBatchId
            }
          })
          item.selectOptions = selectOptions;
        };

      });
      this.$nextTick(() => {
        this.$set(this, 'formItemList', list)
        console.log(this.formItemList)
      })
    },
    searchBar() {
      this.queryPageList();
      this.queryBatch();
      this.searchParams.productionBatchId = ''
    },
    queryBatch() {
      BatchApi.queryByCondition({ status: "UN_COMPLETE" }).then(res => {
        this.batchList = res.data;
        this.setFormOptions();
      });
    },
    resetSearchParams() {
      this.searchParams = {};
      this.queryPageList();
    },
    exportData() {
      AbnormalDeathApi.exportRecord({ ...this.searchParams }).then(res => {
        // data就是接口返回的文件流
        let data = res.data
        if (data) {
          this.getFileNameAndDownload(res)
        } else {
          console.log('error', data)
        }
      })
    },

    queryPageList() {
      let params = {
        page: this.currentPage,
        size: this.pageSize,
        entity: { ...this.searchParams }
      };
      AbnormalDeathApi.queryExportByPage(params).then(res => {
        if (res.success === true) {
          let data = res.data || {};
          this.totalSize = data.totalElements;
          // 赋值数组
          this.tableData = data.content;
          this.addblankmet();
        }
      });
    },
    changeCurrentPage(currentPage) {
      this.currentPage = currentPage;
      this.queryPageList();
    },
  }
};
</script>

<style lang="scss" scoped>
@import "../style/index.scss";
.tableSlot{
  .content{
    height: calc(100% - 70px);
  }
}
</style>
